<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
  // 检查用户是否已登录
  const currentUser = localStorage.getItem('currentUser')
  if (!currentUser) {
    router.push('/login')
  }
})

// 进入个人主页
const goToProfile = () => {
  router.push('/profile')
}

// 进入待办清单
const goToTodoList = () => {
  router.push('/todolist')
}
</script>

<template>
  <div class="choice-container">
    <div class="choice-card">
      <h1>欢迎回来！</h1>
      <p>请选择您想要访问的功能：</p>
      
      <div class="choice-buttons">
        <button class="choice-btn profile-btn" @click="goToProfile">
          <div class="btn-icon">👤</div>
          <span>个人主页</span>
        </button>
        
        <button class="choice-btn todo-btn" @click="goToTodoList">
          <div class="btn-icon">📋</div>
          <span>待办清单</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.choice-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.choice-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 40px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.choice-card h1 {
  color: #333;
  margin-bottom: 20px;
  font-size: 32px;
}

.choice-card p {
  color: #666;
  margin-bottom: 40px;
  font-size: 18px;
}

.choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.choice-btn {
  background: white;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 18px;
  font-weight: 500;
}

.choice-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.profile-btn:hover {
  border-color: #42b983;
  color: #42b983;
}

.todo-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.btn-icon {
  font-size: 32px;
}

@media (max-width: 480px) {
  .choice-card {
    padding: 30px 20px;
  }
  
  .choice-card h1 {
    font-size: 28px;
  }
  
  .choice-card p {
    font-size: 16px;
  }
  
  .choice-btn {
    font-size: 16px;
    padding: 15px;
  }
}
</style>